<!DOCTYPE html>
<html lang="en">
<head>
    <title>添加车辆信息</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">
    <link rel="stylesheet" type="text/css" href="/laydate/theme/default/laydate.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
    <script src="/js/car.js"></script>


</head>
<body>
<script src="/laydate/laydate.js"></script>
<section id="container">
<#include "sider.ftl">
    <section id="main-content">
        <section class="wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <section class="panel">
                        <header class="panel-heading">
                            添加车辆信息
                        </header>
                        <div class="panel-body">
                            <div class="form" id="app">
                                <form class="" action="/cars/getUserByCardId.do" style="margin-left: 400px">
                                    <div class="input-append">
                                        <input type="text" name="userCardId" placeholder="请输入身份证号码^_^" id="keyword">
                                        <button type="submit" id="findUser" class="btn btn-success">查询身份证</button>
                                        <font color="#a52a2a" style="margin-left: 500px">${message?default("")}</font>
                                    </div>
                                </form>

                                <form class="cmxform form-horizontal" id="addCarForm" action="/cars/addCars.do"
                                      enctype="multipart/form-data" method="POST">
                                    <input type="text" hidden value="${(user.suId) ? default("")}" name="user.suId"/>
                                    <div class="form-group ">
                                        <label for="user.sname" class="control-label col-lg-3">姓名</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" type="text" value="${(user.sname)?default("")}" disabled>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="licenseNum" class="control-label col-lg-3">车牌号</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="licenseNum" name="licenseNum" type="text">
                                        </div>
                                        <span id="tishi"></span>
                                    </div>
                                    <div class="form-group ">
                                        <label for="color" class="control-label col-lg-3">颜色</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="color" name="color" type="text">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="price" class="control-label col-lg-3">价格</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="price" name="price" type="text">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="buyDate" class="control-label col-lg-3">购买日期</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="buyDate" name="buyDate" type="text">
                                            <script>
                                                //执行一个laydate
                                                laydate.render({
                                                    elem: '#buyDate' //指定元素
                                                });
                                            </script>
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="engineNum" class="control-label col-lg-3">发动机号</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="engineNum" name="engineNum" type="text">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="brand" class="control-label col-lg-3">车辆品牌</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="brand" name="brand" type="text">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="brandType" class="control-label col-lg-3">品牌系列</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="brandType" name="brandType" type="text">
                                        </div>
                                    </div>

                                        <div class="form-group ">
                                            <label for="file" class="control-label col-lg-3"> <span style="color: brown;">*</span>车辆照片</label>

                                            <input type="hidden" name="xxxVO.logoPath" id="imgFileFullPath" value="<s:property value='xxxVO.logoPath'/>">
                                            <div class="" id="picId" title="点击选择图片" onclick="$('#fileId').click();">
                                                <s:if test="xxxVO.logoPath!=null&&xxxVO.logoPath!=''"><img style="width: 50px;height: 40px;" id="preview"  src="<s:property value='xxxVO.logoPath'/>"></s:if>
                                                <s:else><img src="/images/"  style="width: 30px; height: 30px"/></s:else>
                                            </div>
                                            <input id="fileId" type="file" onchange="javascript:setImagePreview();" name="file" style="margin-left: 500px;margin-top: -10px"/>
                                            <input type="hidden" id="imgFileName" name="file" /></td>

                                        </div>

                                    </div>
                                    <div class="form-group ">
                                        <label for="type" class="control-label col-lg-3">车辆类型</label>
                                        <div class="col-lg-6">
                                                <span class="select-box">
                                                        <select name="auto" class="select">
                                                            <option value="私家车">私家车 </option>
                                                            <option value="商用车">商用车</option>
                                                        </select>
                                                 </span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-offset-3 col-lg-6">
                                            <button class="btn btn-primary" type="submit">提交</button>
                                            <button class="btn btn-default" type="button">取消</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
            </div>
        </section>
    <#include "/foot.html">
    </section>
</section>
</body>
</html>
<script>
    /**
     * 图片上传及时显示
     * @returns {boolean}
     */
    function setImagePreview() {
        document.getElementById("imgFileName").value = document
                .getElementById("fileId").value;
        var docObj = document.getElementById("fileId");
        var picDivHtml = " ";
        // 更改失败，显示原有的图片
        var logoPath = $("#imgFileFullPath").val();
        if (logoPath && logoPath != '') {
            picDivHtml = '<img style="width: 50px;height: 50px;" id="preview"  src="' +  logoPath + '">';
        }

        if (docObj.files && docObj.files[0]) {
            //计算文件大小
            var size = Math.floor(docObj.files[0].size / 1024);
            if (size > 2 * 1024) {
                alert("文件限制最大为2M");
            } else {
                picDivHtml = '<img width="50px" height="50px" id="preview" src="'
                        + window.URL.createObjectURL(docObj.files[0])
                        + '">';
            }
        }
        document.getElementById("picId").innerHTML = picDivHtml;
        return true;
    }

    /**
     * 根据车牌号，查找车的
     */

    $("#licenseNum").blur(function () {
        $.ajax( {
            type:"POST",
            url:"/cars/getCarById.do",
            data: {
                licensenum: $("#licenseNum").val()
            },
            success:function (data) {

                if(data){
                    $("#tishi").html("<i style='color: red'>已经存在，请勿重复添加</i>");
                }
            }
        });
    });

    function check() {
        if($("#userId").val()==""){
            $("#userid").html("<i class='fa fa-exclamation' style='color: darkred' ></i>");
            $("input[id='userId']").css("border","1px solid #E6594E");
            return false;
        }

        if($("#licenseNum").val()==""){
            $("#licensenum").html("<i class='fa fa-exclamation' style='color: darkred' ></i>");
            $("input[id='licenseNum']").css("border", "1px solid #E6594E");
            return false;
        }

        if($("#Color").val()==""){
            $("#color").html("<i class='fa fa-exclamation' style='color: darkred' ></i>");
            $("input[id='Color']").css("border", "1px solid #E6594E");
            return false;
        }
        if($("#Price").val()==""){
            $("#price").html("<i class='fa fa-exclamation' style='color: darkred' ></i>");
            $("input[id='Price']").css("border", "1px solid #E6594E");
            return false;
        }
        if($("#buyDate").val()==""){
            $("#buydate").html("<i class='fa fa-exclamation' style='color: darkred' ></i>");
            $("input[id='buyDate']").css("border", "1px solid #E6594E");
            return false;
        }

        if($("#engineNum").val()==""){
            $("#enginenum").html("<i class='fa fa-exclamation' style='color: darkred' ></i>");
            $("input[id='engineNum']").css("border", "1px solid #E6594E");
            return false;
        }
        if($("#Brand").val()==""){
            $("#brand").html("<i class='fa fa-exclamation' style='color: darkred' ></i>");
            $("input[id='Brand']").css("border", "1px solid #E6594E");
            return false;
        }
        if($("#brandType").val()==""){
            $("#brandtype").html("<i class='fa fa-exclamation' style='color: darkred' ></i>");
            $("input[id='brandType']").css("border", "1px solid #E6594E");
            return false;
        }
        if ($("#seatnum").val() == "") {
            $("#seat").html("<i class='fa fa-exclamation' style='color: darkred' ></i>");
            $("input[id='seatnum']").css("border", "1px solid #E6594E");
            return false;
        }
        if($("#Type").val()==""){
            $("#type").html("<i class='fa fa-exclamation' style='color: darkred' ></i>");
            $("input[id='Type']").css("border", "1px solid #E6594E");
            return false;
        }

    }
</script>

